<template>
  <view class="xcfrttyy">
    <view class="hhggbxeer row bbm">
      <!-- <view class="col pd ls fz26 pr mr10" @tap="caidan">
        <text class="ml10">{{ xzse ? xzse : "全部申请" }}</text>
        <image
          src="../../../../static/img/down.png"
          class="downxeer cz"
        ></image>
      </view> -->
      <view class="col pd ls fz26 pr mr10 blm" @tap="caidanb">
        <text class="ml10">{{formData.status !== '' ? statusList[formData.status + 1] : '全部' }}</text>
        <image
          src="../../../../static/img/down.png"
          class="downxeer cz"
        ></image>
      </view>
      <view class="col pd ls fz26 pr cen blm">
        <picker
          mode="date"
          :value="formData.queryDate"
          @change="bindDateChange"
        >
          <view class="uni-input">{{
            formData.queryDate ? formData.queryDate : "选择日期"
          }}</view>
        </picker>
        <icon v-if="formData.queryDate" class="cancel-icon" type="cancel" size="20" color="#3DADEB" @tap="bindDateChange('')"/>
      </view>
    </view>

    <view class="pd pt20 pm20">
      <view v-for="item in myList" :key="item.id" class="">
        <view v-if="!item.id" class="fz24 z9 line"> {{ item }} </view>
        <navigator
          v-else
          class="kjhnnxer ov"
          :url="'/pages/gongzuo/shenqing/jiluxq?applyFormId=' + item.id+'&status='+item.status"
        >
          <view class="row pd dsfdsrt fz26" :style="'background-color:'+ colorDict[item.status]">
            <view class="col">
              <image
                src="../../../../static/img/louzuo_b.png"
                mode="widthFix"
                class="xderrty cz"
              ></image>
              <text class="ml10">{{item.fieldTypeName}}</text>
            </view>
            <view class="tr">
              {{ $dict.status[item.status] }}
              <image
                src="../../../../static/img/right.png"
                class="fdgrfty cz"
              ></image>
            </view>
          </view>
          <view class="row cen pt30">
            <view class="col">
              <view class="fz24 z9">
                开始时间
              </view>
              <view class="z3 mt10 fz26 word-break">
                {{ item.startTime }}
              </view>
            </view>
            <view class="col">
              <view class="fz24 z9">
                结束时间
              </view>
              <view class="z3 mt10 fz26 word-break">
                {{ item.endTime }}
              </view>
            </view>
            <view class="col">
              <view class="fz24 z9">
                申请数量
              </view>
              <view class="z3 mt10 fz26">
                {{ item.fieldAmount }}
              </view>
            </view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      myList: [],
      formData: {
        status: '',
        queryDate: "",
      },
      statusList: ["全部状态", "待审批",  "未通过", "已通过", '已完成', "已撤回"],
      colorDict:{
          0: '#f7b55e',
          1: '#f2725e',
          2: '#a8e067',
          5: '#eee',
      },
    };
  },
  components: {},
  mounted() {
    var date = new Date();
    this.formData.queryDate = '';
      uni.setNavigationBarTitle({
        title: "我的申请",
      });
      this.getMyList();
  },
  methods: {
    async getMyList() {
      let that = this;
      let res = await this.$api.applyList(this.formData);
      if (res.code == 200) {
        this.myList = res.data;
      }

      let nowMonth = "";
      let nowYear = "";
      let newArr = [].concat(this.myList);
      let len = 0;
      newArr.forEach((i, index) => {
        if (!i.startTime) return;
        let s = i.startTime.split("-");
        if (s[0] != nowYear) {
          nowYear = s[0];
          this.myList.splice(index + len, 0, nowYear + "年");
          len += 1;
        } else if (s[1] != nowMonth) {
          nowMonth = s[1];
          this.myList.splice(index + len, 0, nowMonth + "月");
          len += 1;
        }
      });
    },
    bindDateChange(e) {
      if(e === '') {
        this.formData.queryDate = ''
      } else {
        this.formData.queryDate = e.detail.value;
      }
      this.getMyList();
    },
    caidanb() {
      let th = this;
      uni.showActionSheet({
        itemList: th.statusList,
        success: function (res) {
          console.log(res.tapIndex)
          th.formData.status = res.tapIndex - 1 < 0 ? "" : res.tapIndex - 1;
          this.myList = [];
          th.getMyList();
        },
      });
    },
  },
};
</script>
<style scoped>
.line {
  margin-top: 20upx;
}

.word-break {
  margin: auto;
  word-break: break-word;
  width: 180upx;
}

.kjhnnxer {
  min-height: 200upx;
  background: #fff;
  border-radius: 8upx;
  margin-top: 20upx;
  border: 1px solid #e0e0e0;
  padding-bottom: 20upx;
}
.xderrty {
  width: 50upx;
  height: 50upx;
}

.dsfdsrt {
  background: #fda470;
  color: #fff;
  line-height: 70upx;
}
.fdgrfty {
  width: 30upx;
  height: 30upx;
}
.xcfrttyy {
  padding-bottom: 100upx;
}
</style>
